<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 100px;
        height: 50px;
        margin: 50px auto;
      }
      #cs {
        background-color: rgb(66, 65, 65);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <canvas id="cs" width="100px" height="50px"
        >您的浏览器不支持canvas</canvas
      >
    </div>
  </body>
  <script>
    var cs = document.getElementById("cs");
    if (cs.getContext("2d")) {
      var ctx = cs.getContext("2d");
      // 初始绘制干扰线 绘制随机字符
      randomCode();
      randomLine();
      // 鼠标单击更新验证码
      cs.onclick = function () {
        // 先清空画布
        ctx.clearRect(0, 0, 100, 50);
        // 绘制随机字符
        randomCode();
        // 绘制干扰线
        randomLine();
      };

      // 封装随机生成数字和字母函数
      function randomCode() {
        /*  // 随机生成数字和字母（4位）
        var code = "";
        for (var i = 0; i < 4; i++) {
          var flag = Math.ceil(Math.random() * 10);
          if (flag % 2 == 0) {
            //当随机生成一个(0-10)的数是偶数时验证码下一个字符为数字
            code += Math.floor(Math.random() * 10);
          } else {
            //当随机生成一个(0-10)的数是奇数时验证码下一个字符为字母
            code += String.fromCharCode(Math.ceil(Math.random() * 26) + 97); //a~z (97~122)
          }
        }
        console.log(code); */
        //  2.用random产生一个指定长度随机数 字符串
        function randomStr(len) {
          if (len <= 11)
            //(转换后的字符串小数点后最长11位)
            return Math.random().toString(36).substr(2, len).padEnd(len, "0");
          // 转换为36进制(0-z)的字符串,再截取指定长度,长度不足len位的补0
          else {
            //长度不足再进行一次递归调用
            return randomStr(11) + randomStr(len - 11);
          }
        }
        var code = randomStr(4);
        // 将随机数绘制到验证码区域
        ctx.beginPath();
        ctx.font = "45px 楷体";
        textAlign = "center";
        ctx.fillStyle = "red";
        ctx.fillText(code, 10, 40);
      }

      // 封装随机生成干扰线函数
      function randomLine() {
        ctx.beginPath();
        // ctx.moveTo(0, 0); //画笔移动到起始位置
        for (var i = 0; i < 10; i++) {
          // 随机生成x,y坐标
          var x1 = Math.ceil(Math.random() * 100);
          var y1 = Math.ceil(Math.random() * 50);
          ctx.moveTo(x1,y1);
          var x2 = Math.ceil(Math.random() * 100);
          var y2 = Math.ceil(Math.random() * 50);
          ctx.lineTo(x2, y2);
          ctx.lineWidth = 1;
          ctx.strokeStyle = "white";
          ctx.stroke();
        }
      }
    }
  </script>
</html>
